<template>
	<view>
		<view style="display: flex;">
			<uni-search-bar class="searchInfo" @confirm="search" @cancel="search" cancelText="搜索" :focus="true"
				v-model="searchValue" @input="input"></uni-search-bar>
			<view class="mapMode">地图模式</view>
		</view>
		<uni-data-select class="selectItem" v-model="value" :localdata="range" @change="change">
		</uni-data-select>
		<view v-for="(station,index) in addressList" :key="station.id" class="shop" @click="goto(index)">
			<view>
				<image class="shopImage" src="/static/uni.png"></image>
			</view>
			<view class="content">
				<view class="name">{{station.title}}</view>
				<view>
					<view class="price">￥5.97/升</view>
					<view class="coupons">满200减20</view>
				</view>
				<view class="address">{{station.address}}</view>
			</view>
			<view class="toStation">
				<view class="distance">{{station._distance}}m</view>
				<image class="nav" src="/static/image/地址.jpg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				addressList: [],
				range: [{
						value: 0,
						text: "92#"
					},
					{
						value: 1,
						text: "95#"
					},
					{
						value: 2,
						text: "98#"
					},
				],
			}
		},
		onLoad() {
			this.getFueStation()
		},
		methods: {
			input(e) {
				console.log(e)
			},
			search() {
				console.log(this.searchValue)
			},
			change(e) {
				console.log(e)
			},
			goto(index) {
				uni.navigateTo({
					url: "/pages/refuelNearbyDetail/refuelNearbyDetail?data=" + encodeURIComponent(JSON.stringify(
						this.addressList[index]))
				})
			},
			// 获取加油站信息
			getFueStation() {
				let that = this
				uni.request({
					url: 'https://apis.map.qq.com/ws/place/v1/explore?boundary=nearby(40.040394,116.273523,1000)&policy=1&page_size=10&page_index=1&key=MJ4BZ-YY3C4-NHVUD-K543M-5AYNQ-YWBSO&filter=category=加油站&orderby=_distance',
					method: 'GET',
					success(res) {
						console.log(res);
						if (res.data.message == 'Success') {
							that.addressList = res.data.data
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.searchInfo {
		width: 280px;
	}

	.mapMode {
		text-align: center;
		line-height: 55px;
	}

	.selectItem {
		width: 80px;
		margin-left: 40px;
	}

	.shop {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 2rpx solid #eee;
	}

	.shopImage {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		width: 300rpx;
		height: 200rpx;
		margin: 10rpx 50rpx 10rpx 20rpx;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	
	.content > view:nth-child(2) {
		display: flex;
		padding: 20rpx 0;
	}
	
	.price {
		font-size: 26rpx;
		color: #ff63aa;
		margin-right: 8rpx;
	}
	
	.coupons {
		font-size: 26rpx;
		color: #ff63aa;
		background-color: #fff0f0;
	}
	
	.address {
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.toStation {
		width: 50rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		padding: 10rpx 30rpx 10rpx 0;
		text-align: center;
	}

	.nav {
		width: 100;
		height: 50rpx;
	}
</style>